<template>
	<div class="mb-3 flex justify-between items-center">
		<div class="">
			<!-- <base-icon name="filter"></base-icon>
			{{ $t('feed.filter.title') }} -->
		</div>
		<!-- <div
			class="feeds-filter__switch"
			:class="{ isActive: store.getters.feedsFilterSwitch }"
			@click="popupShow = true">
			<base-icon name="filter"></base-icon>
			{{ $t('feedsFilter.title') }}
			<van-badge
				:content="store.getters['feeds/selections']"
				:show-zero="false"
				:offset="[-2, 16]"></van-badge>
		</div> -->
		<base-toggle-group :model-value="order" :data="orderList" @update:model-value="onOrderChange" />
	</div>
	<!-- <feeds-filter-popup v-model:show="popupShow" /> -->
</template>

<script setup lang="ts">
import { BaseToggleGroup } from '@/components/base'
// import FeedsFilterPopup from './feeds-filter-popup.vue'
import { ref } from 'vue'

const props = defineProps({
	order: {
		type: String,
		default: ''
	}
})

const emits = defineEmits(['update:order'])

const orderList = ref([
	{ id: 'startbefore', textT: 'feed.time', icon: 'history' },
	{ id: 'stake', textT: 'feed.stake', icon: 'USD' },
	{ id: 'copiednum', textT: 'feed.trend', icon: 'trend' }
])

// eslint-disable-next-line @typescript-eslint/no-unused-vars
// const popupShow = ref(false)

const onOrderChange = (value: any) => {
	const order = props.order === value ? 'created_at' : value
	emits('update:order', order)
}
</script>
